<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" ref="userName" />
			<input type="button" ref="myBut" @click="getEl" value="ref获取元素"/>
			<hr/>
			<!-- router-link 默认渲染为一个a 标签 可以通过tag设置其他标签-->
			<!-- <router-link to="/login">登录</router-link> -->
			<!-- 传参数1 -->
			<!-- <router-link to="/login?id=123&name=这是哪个是">登录</router-link> -->
			<!-- 传参数2 -->
			<!-- <router-link to="/login/123/这是哪个是">登录</router-link>
			<router-link to="/register" tag="span">注册</router-link> -->
			<!-- 路由匹配到的组件将渲染在这里 -->
			<!-- <router-view></router-view> -->
			<!-- 名称路由 -->
			<router-view></router-view>
			<!-- 当url是一样的时候可以通过名称来路由 -->
			<router-view name="left"></router-view>
			<router-view name="main"></router-view>
			
			<hr/>
			监听数据变化:<input type="text" v-model="user">
			<hr/>
			<p>{{ fullname }}</p>
		</div>	
	</body>
	
	<script>
		var login = {
			template:"<h3>我是登录</h3>",
			created(){ // 组件的生命周期钩子函数
				console.log(this.$route)
				console.log(this.$route.query.id +"="+this.$route.query.name) //获取url上的参数
				console.log(this.$route.params.id)
			}
		}
		var register = {
			template:"<h3>我是注册</h3>"
		}
		var route = new VueRouter({
			routes:[
				// 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
				//{"path":"/login",component:login},
				//{"path":"/login/:id/:name",component:login},
				//{"path":"/register",component:register},
				//{"path":"/",redirect:"/login"}, //redirect是重定向的意思
				{
					"path":"/",components:{
						'default': login,
						'left': login,
						'main': register
					}
				}
			]
		});
		var vue = new Vue({
			el:"#app",
			data:{
				user:"",
				id:""
			},
			methods:{
				getEl(){
					//通过$refs 来获取元素
					console.log(this.$refs.userName);
					console.log(this.$refs.myBut);
				}
			},
			router:route,
			watch:{
				user:function(newVal,oldVal){
					alert("newVal:"+newVal+",oldVal:"+oldVal);
				}
			},
			computed:{
				//计算属性的本质是个方法，只不过我们在使用这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用
				// 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
				// 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
				// 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，任何数据都没有发生过变化，则，不会重新对 计算属性求值；
				fullname:function(){
					return "ok";
				}
			}
		});
	</script>
</html>
